<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 1 -->
    <div id="yi">
        <div >
            <h1 v-if="age===0"></h1>
            <h1 v-if="age==10">海绵宝宝，一起去抓水母吧！</h1>
        </div>
        <button @click="age++">点击</button>
    </div>


<!-- 2 -->
    <div id="er">
        <div v-if="b%2 !== 0">{{a}}</div>
        <button @click = "lei">显/隐</button>
    </div>


<!-- 3 -->
    <div id="san">
        <button @click="he" v-if="aa > 1">-</button>
        <button v-else-if="aa=== 1" disabled>-</button>
        <h2>{{aa}}</h2>
        <button @click="yang" v-if="aa < 10">+</button>
        <button v-else-if="aa === 10" disabled>+</button>
    </div>
    
    
</body>
<script src="./vue.js"></script>
<script>
// 1. 对一个按钮点击十次后，让某个div显示出来
const{createApp,ref} = Vue;

const app = createApp({
         setup(){
            let age = ref(0)          
            return{
                age
            }
         }
    })
    app.mount('#yi')
    

// 2. 点击按钮,如果div是显示状态，就把div隐藏，否则把div显示出来。
createApp({
        setup(){
            let a = ref(1)
            let b = ref(1)
            function lei() {
                b.value++
            }
            return{
                a,
                b,
                lei
            }
        }
    }).mount('#er')



// 3.实现一个步进器(购物车的加减) 
// 如果数量等于1时，减少按钮变成灰色不可点击状态，如果数量大于等于10时，增加按钮变成不可点击状态。
createApp({
        setup(){
            let aa = ref(1)
            function yang() {
                aa.value++
            }
            function he() {
                aa.value--
            }
            return{
                aa,
                he,
                yang
            }
        }
    }).mount('#san')


</script>

</html>